<template>
    <!-- 第四个el-card 进度条 -->
    <div class="progressChart" ref="progressChart"></div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
export default {
    name: "ProgressChart",
    mounted() {
        // 组件挂载完后初始化echarts实例
        let myEcharts = echarts.init(this.$refs.progressChart)
        myEcharts.setOption({
            xAxis:{
                // 隐藏X轴
                show:false,
                // X轴最小值与最大值
                min:0,
                max:100
            },
            yAxis:{
                // 隐藏Y轴
                show:false,
                // 均分       在Y轴均分，柱状图就会横过来
                type:'category'
            },
            series:[
                {
                    type:'bar',
                    data:[78],
                    color:'yellowgreen',
                    // 柱状图的宽度
                    barWidth:10,
                    // 背景颜色的设置
                    showBackground:true,
                    backgroundStyle:{
                        color:'#eee'
                    },
                    // 文本标签
                    label:{
                        show:true,
                        // 文本内容
                        formatter:'|',
                        // 文本标签位置
                        position:'right'
                    }
                }
            ],
            grid:{
                left:0,
                right:0,
                top:1,
                bottom:0
            },
            // 提示信息
            tooltip:{}
        })
    }
}
</script>

<style scoped>
.progressChart {
    width: 100%;
    height: 100%;
}
</style>
